<template>
    <div class='img-bg' >
        <div class='imgset-left'>
            <!-- 轮播图系列 -->
            <div  v-if="showClass === 'swiper-full-big'">
                <div class="swiper-container swiper-no-swiping swiper-full-big">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  v-for='(val,i) in array' :key="'ban'+i">
                            <div v-if="val.url"><img :src="val.url" alt=""></div>
                            <div class="swiper-slide-null" v-else></div>
                        </div>
                    </div>
                    <div class="swiper-pagination banner-num swiper-pagination-big" ></div>   
                </div>
            </div>
            <!-- 小图 -->
            <div  v-if="showClass === 'swiper-full-small'">
                <div class="swiper-container swiper-no-swiping swiper-full-small">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  v-for='(val,i) in array' :key="'ban'+i">
                            <div v-if="val.url"><img :src="val.url" alt=""></div>
                            <div class="swiper-slide-null" v-else></div>
                        </div>
                        <div class="swiper-pagination banner-num swiper-pagination-small" ></div> 
                    </div>   
                </div>
            </div>
            <!-- 卡片式1 -->
            <div  v-if="showClass === 'swiper-card-h-theme1'">
                <div class="swiper-container swiper-no-swiping swiper-card-h-theme1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  v-for='(val,i) in array' :key="'ban'+i">
                            <div v-if="val.url"><img :src="val.url" alt=""></div>
                            <div class="swiper-slide-null" v-else></div>
                        </div>
                        <div class="swiper-pagination banner-num swiper-pagination-theme1" ></div>
                    </div>   
                </div>
            </div>
            <!-- 卡片式2 -->
            <div  v-if="showClass === 'swiper-card-h-theme2'">
                <div class="swiper-container swiper-no-swiping swiper-card-h-theme2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"  v-for='(val,i) in array' :key="'ban'+i">
                            <div v-if="val.url"><img :src="val.url" alt=""></div>
                            <div class="swiper-slide-null" v-else></div>
                        </div>
                        <div class="swiper-pagination banner-num swiper-pagination-theme2" ></div>
                    </div>   
                </div>
            </div>
            <!-- 每行一列 -->
            <div :class="['fix-box-line',spaceClass()]" v-if="showClass==='fix-box-line'">
                <div class='imgset-oneline' v-if="array.length">
                    <div class='imgset-oneline-li'  :style="{'margin-bottom':gap+'px'}"   v-for='(val,i) in array' :key="'line'+i">
                        <img  :src='val.url' alt=""   v-if="val.url"  >
                        <div v-else></div>
                    </div>
                </div>  
                <div v-else>
                    <div class='imgset-oneline-li'  :style="{'margin-bottom':gap+'px'}" >
                        <img  src='../../../static/images/img_logo5_1.jpg' alt="">
                    </div>
                </div>
            </div>
            <!-- 2列 -->
            <div :class="['fix-box fix-box-twoCol', spaceClass()]" v-if="showClass==='fix-box-twoCol'"> 
                <div class='imgset-twoCol'  >
                    <div v-for='(val,i) in array2' :key="'col2'+i" :class="(val==='null')?'imgset-twoCol-null':'imgset-twoCol-li'"  :style="gapSet(val,'width','col2')">
                        <img  v-if="val!=='null' && !isEmptyObject(val.url)" :src='val.url' alt="" >
                        <!-- 背景 -->
                        <div  v-if="val!=='null' && isEmptyObject(val.url)" ></div>
                    </div>   
                </div>
            </div>
            <!-- 3列 -->
            <div :class="['fix-box fix-box-threeCol', spaceClass()]" v-if="showClass==='fix-box-threeCol'">
                <div class='imgset-threeCol '>
                    <div v-for='(val,i) in array3' :key="'col3'+i" :class="(val==='null')?'imgset-threeCol-null':'imgset-threeCol-li'" :style="gapSet(val,'width','col3')">
                        <img  v-if="val!=='null' && !isEmptyObject(val.url)" :src='val.url' alt="" >
                        <!-- 背景 -->
                        <div  v-if="val!=='null' && isEmptyObject(val.url)" ></div>
                    </div>   
                </div>
            </div>
            <!-- 4列  -->
            <div :class="['fix-box fix-box-fourCol',spaceClass()]"  v-if="showClass==='fix-box-fourCol'">
                <div class='imgset-fourCol' >
                    <div v-for='(val,i) in array4' :key="'col4'+i" :class="(val==='null')?'imgset-fourCol-null':'imgset-fourCol-li'" :style="gapSet(val,'width','col4')">
                        <img  v-if="val!=='null' && !isEmptyObject(val.url)" :src='val.url' alt="" >
                        <!-- 背景 -->
                        <div  v-if="val!=='null' && isEmptyObject(val.url)" ></div>
                    </div>
                </div>
            </div>
            <!-- 左1右2 -->
            <div :class="['fix-box-leftRight', spaceClass()]" v-if="showClass==='fix-box-leftRight'">
                <div class='imgset-leftRightCol'  >
                    <div class='imgset-leftRightCol-left'>
                        <img v-if='!isEmptyObject(array[0].url)'  :src="array[0].url" alt="" >
                        <div v-else></div>
                    </div>
                    <div class='imgset-leftRightCol-null' :style="{'width':gap+'px'}"></div>
                    <div class='imgset-leftRightCol-right'>
                        <ul>
                            <li class='imgset-leftRightCol-rightImg' :style="{'padding-bottom':gap/2+'px'}" >
                                <div v-if="!isEmptyObject(array[1])">
                                    <img v-if='!isEmptyObject(array[1].url)'  :src="array[1].url" alt="" >
                                    <div v-else></div>
                                </div> 
                                <div class="imgset-leftRightCol-null" v-else ></div>     
                            </li>
                            <li class='imgset-leftRightCol-rightImg' :style="{'padding-top':gap/2+'px'}">
                                <div  v-if="!isEmptyObject(array[2])">
                                    <img v-if='!isEmptyObject(array[2].url)'  :src="array[2].url" alt="" >
                                    <div v-else></div>
                                </div>
                                <div class="imgset-leftRightCol-null" v-else ></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>    
        </div>
        <!-- 右侧列表 -->
        <div class='imgset-right'>
            <h4 class='imgset-right-title'>图片</h4>
            <p class="imgset-right-sub">请选择样式</p>
            <ul class='imgset-box'>
                <li @click="add('swiper-full-big',obj1)" :class="pointSet('swiper-full-big')" >
                    <img src="../../../static/images/img_logo1.jpg" alt="">
                    <p>轮播图(大)</p>
                </li>
                <li @click="add('swiper-full-small',obj2)" :class="pointSet('swiper-full-small')" >
                    <img src="../../../static/images/img_logo2.jpg" alt="">
                    <p>轮播图(小)</p>
                </li>
                <li @click="add('swiper-card-h-theme1',obj3)" :class="pointSet('swiper-card-h-theme1')">
                    <img src="../../../static/images/img_logo3.jpg" alt="">
                    <p>卡片-横向滑动1</p>
                </li>
                <li @click="add('swiper-card-h-theme2',obj4)" :class="pointSet('swiper-card-h-theme2')">
                    <img src="../../../static/images/img_logo4.jpg" alt="">
                    <p>卡片-横向滑动2</p>
                </li>
                <li @click="fix1('line')" :class="pointSet('line')">
                    <img src="../../../static/images/img_logo5.jpg" alt="" >
                    <p> 每行1列</p>
                </li>
                <li @click="fix2('col2')" :class="pointSet('col2')">
                    <img src="../../../static/images/img_logo7.jpg" alt="" >
                    <p>2列</p>
                </li>
                <li @click="fix3('col3')" :class="pointSet('col3')">
                    <img src="../../../static/images/img_logo8.jpg" alt="" >
                    <p>3列</p>
                </li>
                <li @click="fix4('col4')" :class="pointSet('col4')">
                    <img src="../../../static/images/img_logo9.jpg" alt="" >
                    <p>4列</p>
                </li>
                <li @click="fix5('leftRight')" :class="pointSet('leftRight')" >
                    <img src="../../../static/images/img_logo10.jpg" alt="">
                    <p>左1右2</p>
                </li>
            </ul>
            <!-- 图片上传选框 -->
            <div>
                <el-form   ref="headerForm" label-width="100px" class="demo-headerForm img-list-lable">
                    <el-form-item label="开启空白"  
                        v-if="point!='swiper-full-big'
                        &&point!='swiper-full-small'
                        &&point!='swiper-card-h-theme1'
                        &&point!='swiper-card-h-theme2'"
                    >
                        <el-switch   v-model="spacing"  ></el-switch>
                    </el-form-item>
                    <el-form-item label="图片间隙"
                        v-if="point!='swiper-full-big'&&point!='swiper-full-small'"
                    >
                        <el-slider v-model="gap" v-on:change='changeGap()'></el-slider>
                    </el-form-item>
                    <el-form-item label="图片上传">
                        <el-upload
                        class="upload-demo"
                        drag
                        action="/"
                        :before-upload="addImage"
                        :show-file-list="false" 
                        multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    <!-- 图片拖拽部分 -->
                    <el-row  v-if="reFresh" >
                        <draggable  :options="{group:'people'}" @start='start' @end='end' class="dragArea" >
                            <el-row  class='drag-Image-box' v-for='(element,index) in array' :key="'element'+index">
                                <i class="el-icon-close drag-Image-close" @click='delImage(index)'></i>
                                <el-row class='drag-Image-top'>
                                    <el-col :span='6' class='upload-top-left' >
                                        <div class='img-list-det'  v-if="element.url">
                                            <div class='img-listdet-show'  @mouseover="enter(index)"   >
                                                <img :src="element.url" alt="">
                                            </div>
                                            <div class='img-listdet-del'   @mouseleave="leave(index)" v-if="element.check!=true" >
                                                <i class="el-icon-delete" @click="changeImage(index)"></i>
                                            </div>
                                        </div>
                                        <el-upload   v-if="!element.url"  
                                                class="upload-demo-add"
                                                drag
                                                action="/"
                                                :before-upload="(file)=>{ return beforeUpload(file,index) }"
                                                :show-file-list="false" 
                                                multiple>
                                            <div class="el-upload__text">
                                                <i class="el-icon-plus"></i>
                                                <p class="drag-Image-add">添加图片</p>
                                            </div>
                                        </el-upload>
                                    </el-col>
                                    <el-col :span='18' class='drag-top-left'>
                                        <p class='drag-top-label'>连接类型</p>
                                        <el-select v-model="element.imageType" placeholder="请选择" class='drag-top-leftSel' >
                                            <el-option
                                            v-for="item in imgUrl"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            <p style="color: #8492a6;text-align:center; font-size: 13px">{{ item.label }}</p>
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                                <el-row class='drag-Image-bottom'>
                                    <el-col :span='6' class='drag-bottom-label'> 图片连接</el-col>
                                    <el-col :span='18' class='drag-bottom-left'><el-input v-model="element.connectUrl" placeholder="请输入内容"></el-input></el-col>
                                </el-row>
                            </el-row>
                        </draggable>
                    </el-row>
                </el-form>
            </div> 
        </div>
    </div>   
</template>
<script>
import Swiper from 'swiper'; 
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'
// import 'swiper/dist/swiper5.css'
// import 'swiper/dist/swiper5.js'
import draggable from 'vuedraggable'
export default {
    data(){
        return {
            swiper:'',//轮播
            showClass:'',//默认展示大图
            point:'',//右侧位置指针 默认当前显示大图模式
            spacing:false,//是否开启间距   
            gap:10,//图片间隙
            reFresh:true,
            imgUrl:[{label:'微信公众号网页',value:1},{label:'小程序入径',value:2}],
            array:[{url:'../../../static/images/img_logo11_1.jpg',check:true,imageType:'微信公众号网页',connectUrl:'www.baidu.com'},{url:'../../../static/images/img_logo11_2.jpg',check:true,imageType:'',connectUrl:''}],//实际接收图片list
            array1:[],//左1右2的数组展示
            array4:[],//4列展示的数组
            array3:[],//3列展示的数组
            array2:[],//2列展示的数组
            obj1:{   //大图模式
                el: '.swiper-full-big',
                height:'375',
                loop : false,
                autoplay: true,
                pagination: {    
                    el: '.swiper-pagination-big',
                    type: 'fraction',
                },
                speed:2000,
                slidesPerView: 1, //可视图片
                // spaceBetween: 0, 
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                observeSlideChildren:true,                
                lazyLoadingInPrevNext : true,//图片预先加载
                lazyLoadingInPrevNextAmount :1,
            },
            obj2:{ //小图模式
                el: '.swiper-full-small',
                height:'187',
                // loop :true,
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination-small',
                    type: 'fraction',
                },
                speed:2000,
                slidesPerView: 1, //可视图片
                // spaceBetween: 0,  
                height: 100,//你的slide高度
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                observeSlideChildren:true,
                lazyLoadingInPrevNext : true,//图片预先加载
                lazyLoadingInPrevNextAmount : 2,
            },
            obj3:{ //卡片横向滑动1
                el: '.swiper-card-h-theme1',
                height:'167',
                // loop : true, //环播模式
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination-theme1',
                    type: 'fraction',
                },
                speed:2000,
                centeredSlides: true,
                slidesPerView: 'auto',
                slidesPerView: 2, //可视图片2张 
                spaceBetween: 10, //图片间距
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                observeSlideChildren:true,
                lazyLoadingInPrevNext : true,//图片预先加载
                lazyLoadingInPrevNextAmount : 2,
            },
            obj4:{ //卡片横向滑动2
                el: '.swiper-card-h-theme2',
                height:'203',
                // loop : true,//环播模式
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination-theme2',
                    type: 'fraction',
                },
                speed:2000,
                centeredSlides: true,
                slidesPerView: 'auto',
                slidesPerView:2, //可视图片3张 
                spaceBetween:10, //图片间距 
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                observeSlideChildren:true, 
                lazyLoadingInPrevNext : true,//图片预先加载
                lazyLoadingInPrevNextAmount : 2,   
            }
        }
    },
    components:{
        draggable //拖拽
    },
    created(){
        this.showClass='swiper-full-big';
        this.point='swiper-full-big';
    },
    mounted(){
        this.swiper= new Swiper ('.swiper-full-big', this.obj1);   
    },
    methods:{
        change: function (evt) {
            console.log(evt)
        },
        start: function (evt) {
            console.log(evt)
        },
        // move: function (evt, originalEvent) {
        //     console.log(evt)
        //     console.log(originalEvent) //鼠标位置
        // },
        //图片列表的拖拽
        end: function (evt) {
            // evt.item //可以知道拖动的本身
            // evt.to    // 可以知道拖动的目标列表
            // evt.from  // 可以知道之前的列表
            // evt.oldIndex  // 可以知道拖动前的位置
            // evt.newIndex  // 可以知道拖动后的位置
            let newObj=this.array[evt.oldIndex];   
            let oldObj=this.array[evt.newIndex];
            this.array[evt.newIndex]=newObj;
            this.array[evt.oldIndex]=oldObj;   //数据列表位置移动的 
            this.reFresh= false  //重新刷新图上传列表
            this.$nextTick(()=>{
                this.reFresh = true
            })
            add(point,type)
            //刷新swiper的轮播部分

        },
       
        //右侧位置高亮显示
        pointSet(point){
            if(this.point==point){
                return 'active'  
            }
        },
        // //轮播样式设置
        // banClassSet(){
        //     if(this.point=='swiper-card-h-theme1'||this.point=='swiper-card-h-theme2'||this.point=='swiper-full-small'||this.point=='swiper-full-small'){
        //         return 'swiper-container' +' '+'swiper-no-swiping' +'  ' +this.point
        //     } 
        // },
        //是否开启间距class
        spaceClass(){
            if(this.spacing){
                return 'myspacing'; //间距class 默认10px
            }
        },
        //宽度的间距设置
        gapSet(bool,type,point){
            if(bool=='null' && this.point==point){
                return( type+":"+this.gap+"px");    
            } 
        },
        //间隙更改
        changeGap(){
            if(this.point=='swiper-card-h-theme2'){
                this.obj4.spaceBetween=this.gap;
            }else if(this.point=='swiper-card-h-theme1'){
                this.obj3.spaceBetween=this.gap;
            }
            if(this.swiper.el){
                this.swiper.destroy(false,false)
            }
            let newPoint=this.point;
            this.point=false;
            this.$nextTick(()=>{
                this.point = newPoint;
                this.newSwiper()
            })
        },
        /**
        * add 轮播系列的更换
        * point 右图片位置切换
        * type 类型 1 obj1为大图的轮播配置； obj2-小图 ；obj3-横向滑动1；obj4-横向滑动2；
        * 
        */
        add(point,type){
            if(this.swiper.el){
                this.swiper.destroy();
            }
            this.point=point;
            this.gap=10;
            this.showClass= false  //重新刷新图上传列表
            this.$nextTick(()=>{
                this.showClass=this.point;
                this.newSwiper();
            })  
        },
        //重新实例化swiper
        newSwiper(){
            this.$nextTick(()=>{
                let classContainer='.'+this.point;
                let obj;
                if(this.point=='swiper-card-h-theme2'){
                    obj=this.obj4
                }else if(this.point=='swiper-card-h-theme1'){
                    obj=this.obj3
                }else if(this.point=='swiper-full-big'){
                    obj=this.obj1
                }else if(this.point=='swiper-full-small'){
                    obj=this.obj2
                }
                this.swiper =new Swiper (classContainer,obj);  
            }) 
        },
        //每行一列的显示
        fix1(point){
            this.point=point;
            this.gap=10; //恢复图片间距初始值
            this.showClass='fix-box-line';
        },
        //2列的显示
        fix2(point){
            this.point=point;
            this.gap=10; //恢复图片间距初始值
            this.showClass='fix-box-twoCol'; 
            this.array=this.cutArray(this.array,2); //长度截取
            let [first={},second={}]=this.array;  //重组数据格式
            this.array2=[first,'null',second]; 
        },
        //3列的显示
        fix3(point){
            this.point=point;
            this.gap=10; //恢复图片间距初始值
            this.showClass='fix-box-threeCol';
            this.array=this.cutArray(this.array,3); //长度截取
            let [first={},second={},third={}]=this.array;  //重组数据格式
            this.array3=[first,'null',second,'null',third];   
        },
        //4列的显示
        fix4(point){
            this.point=point;
            this.gap=10; //恢复图片间距初始值
            this.showClass='fix-box-fourCol';
            this.array=this.cutArray(this.array,4); //长度截取
            let [first={},second={},third={},four={}]=this.array;  //重组数据格式
            this.array4=[first,'null',second,'null',third,'null',four];   
        },
        //左1右2
        fix5(point){
            this.point=point;
            this.gap=10; //恢复图片间距初始值
            this.array=this.cutArray(this.array,3); //长度截取
            this.showClass='fix-box-leftRight';
        }, 
        //固定列的点击选择总结
        /**
         * point  右侧选择的图片样式
         * len  固定列截对应的数组最多展示列
         *
         */
        colType(point,len){
            this.gap=10;//初始化图片间距 
            this.point=point;
            this.array=this.cutArray(this.array,len)  //图片列表长度的截取
            //数组的重构
            if(point=='col2'){  //2列
                let [first={},second={}]=this.array;  //重组数据格式
                this.array2=[first,'null',second];
            }else if(point=='col3'){  //3列
                let [first={},second={},third={}]=this.array;  //重组数据格式
                this.array3=[first,'null',second,'null',third];
            }else if(point=='col4'){  //4列
                let [first={},second={},third={},four={}]=this.array;  //重组数据格式
                this.array4=[first,'null',second,'null',third,'null',four];
            }
        },
        //判断是否空字符串;
        isEmptyObject(obj){ 
        　　for (var key in obj){
        　　　　 return false;//返回false，不为空对象
        　　}　
        　　return true;//返回true，表示此处为空格
        },
        //判断是否有图片文件
        hasFile(obj){
            console.log(obj)
            for (var key in obj){  //有图片的对象
                if(obj.url){
                    return false  //有图片的文件夹
                }else{
                    return true;//返回false，没有图片文件
                }　　
        　　} 
        　　return false;//没有图片对象,此处为空格
        },
        //鼠标经过效果
        enter(position){
            this.array[position].check='selecting'
        },
        //鼠标移出效果
        leave(position){
            this.array[position].check=true
        },
        //图片删除
        delImage(position){
            this.array.splice(position,1);
            if(this.point=='swiper-card-h-theme2'||this.point=='swiper-card-h-theme1'||this.point=='swiper-full-big'||this.point=='swiper-full-small'){
                if(this.swiper.el){
                    this.swiper.destory()
                }
                let newPoint=this.point;
                this.point=false;
                this.$nextTick(()=>{
                    this.point = newPoint;
                    this.newSwiper()
                })
            }
        },
        //小图片的删除
        changeImage(position){
            this.array[position].url=''; //展示图片
            this.array[position].file=''; //文件
            this.reFresh= false  //重新刷新图上传列表
            this.$nextTick(()=>{
                this.reFresh = true
            })
            //轮播系列样式的更新
            if(this.point=='swiper-card-h-theme2'||this.point=='swiper-card-h-theme1'||this.point=='swiper-full-big'||this.point=='swiper-full-small'){
                if(this.swiper.el){
                    this.swiper.destory()
                }
                let newPoint=this.point;
                this.point=false;
                this.$nextTick(()=>{
                    this.point = newPoint;
                    this.newSwiper()
                })
            }
              
        },
        //数组的截取 （固定列数组的截取）
        /**
         * array 数组
         * len  长度
         */
        cutArray(array,len){
            let newArray=[];
            array.forEach((item,index)=>{
                if(index<len){
                    newArray.push(item);
                }
            })
            return newArray;
        },
        /**
         * 文件上传 （大图图片上传）
         */
        beforeUpload(file,index){
            this.array[index].url= window.URL.createObjectURL(file);
            this.array[index].file= file;
            return false; //不自动上传
        },
        /**
         * 大图片增加
         */
        addImage(file){
            let url=window.URL.createObjectURL(file);
            let obj={url:url,file:file,check:true,imageType:'',connectUrl:''}
            this.array.push(obj) ;
            //轮播部分的重新实例化
            if(this.point=='swiper-card-h-theme2'||this.point=='swiper-card-h-theme1'||this.point=='swiper-full-big'||this.point=='swiper-full-small'){
                if(this.swiper.el){
                    this.swiper.destory
                }
                this.swiper.destory
                let newPoint=this.point;
                this.point=false;
                this.$nextTick(()=>{
                    this.point = newPoint;
                    console.log(this.point);
                    this.newSwiper()
                })
               
            }
        }
    },
    watch:{
        //图片数组
        array(){       //监听固定列的数组变化
            if(this.point=='col2'){  //2列
                let [first={},second={}]=this.array; 
                this.array2=[first,'null',second];
            }else if(this.point=='col3'){  //3列
                let [first={},second={},third={}]=this.array; 
                this.array3=[first,'null',second,'null',third];
            }else if(this.point=='col4'){  //4列
                let [first={},second={},third={},four={}]=this.array; 
                this.array4=[first,'null',second,'null',third,'null',four];
            }
        },
    }
}
</script>
<style lang="less" >
@import "../../../static/css/element.less";
@import "../../../static/css/imgStyle.less";
</style>


